/* eslint-disable no-shadow */
import React, { useEffect, useState } from "react";
import { Helmet } from 'react-helmet';
import { Card, Avatar, Timeline, Row, Col, Tag } from "antd";
import { GithubOutlined, MailOutlined } from "@ant-design/icons";
import { getAuthorInfo, getBlogList } from "../lib/httpReq";
import { BLOG_DOMAIN, MAX_COUNT } from "../lib/config";
import { dateFormat } from "../lib/utils";
import "./CSS/AboutMe.less";

const iconStyle = {
    paddingRight: "10px",
    fontSize: "20px",
};

function AboutMe() {
    const [authorInfo, setAuthorInfo] = useState<AuthorInfo>({});
    const [recentBlogs, setRecentBlogs] = useState<Blog[]>([]);

    useEffect(() => {
        const authorInfo = window.sessionStorage.getItem('authorInfo');
        const recentBlogs = window.sessionStorage.getItem('recentBlogs');
        if (authorInfo) {
            const authorInfoData = JSON.parse(authorInfo as string) as AuthorInfo;
            setAuthorInfo(authorInfoData);
        } else {
            getAuthorInfo().then((res) => {
                setAuthorInfo(res.data.data);
                window.sessionStorage.setItem('authorInfo', JSON.stringify(authorInfo));
            }).catch();
        }
        if (recentBlogs) {
            const recentBlogsData = JSON.parse(recentBlogs as string) as Blog[];
            setRecentBlogs(recentBlogsData);
        } else {
            getBlogList(0, MAX_COUNT, "").then((res) => {
                setRecentBlogs(res.data.data.result);
                window.sessionStorage.setItem('recentBlogs', JSON.stringify(recentBlogs));
            }).catch();
        }
    }, []);

    const {
        nickname,
        sex,
        age,
        describe,
        github,
        hobby,
        publicEmail,
        csdn,
    } = authorInfo;
    return (
        <>
            <Helmet>
                <title>关于我 - 多云转晴个人信息</title>
                <meta name="description" content="关于我,多云转晴个人信息" />
            </Helmet>
            <Row id="aboutMe-container">
                <Col md={12} sm={24} xs={24} className="author-card">
                    <Card
                        bordered={false}
                        cover={(
                            <Avatar
                                alt="avatar"
                                size={160}
                                src={authorInfo.avatarUrl}
                            />
                        )}
                    >
                        <Card.Meta
                            title={(
                                <p className="nickname">
                                    <span>{nickname || ""}</span>
                                    <span
                                        title={sex === "♂" ? "男" : "女"}
                                        className={sex}
                                    >
                                        {sex || ""}
                                    </span>
                                    <span className="age">
                                        {age ? `${age}岁` : ""}
                                    </span>
                                </p>
                            )}
                            description={BLOG_DOMAIN}
                        />

                        <Card.Meta title={<p className="describe">{describe}</p>} />

                        <Card.Meta
                            title={
                                Array.isArray(hobby)
                                    ? hobby.map((h) => (
                                        <Tag color="magenta" key={h}>
                                            {h}
                                        </Tag>
                                    ))
                                    : ""
                            }
                        />

                        <Card.Meta
                            title={
                                publicEmail ? (
                                    <p className="email">
                                        <MailOutlined style={iconStyle} />
                                        <span>{publicEmail}</span>
                                    </p>
                                ) : (
                                    ""
                                )
                            }
                        />

                        <Card.Meta
                            className="info-item"
                            title={
                                github ? (
                                    <a href={github}>
                                        <GithubOutlined
                                            key="github"
                                            style={iconStyle}
                                            src={github}
                                        />
                                        <span>{github}</span>
                                    </a>
                                ) : (
                                    ""
                                )
                            }
                        />

                        <Card.Meta
                            className="info-item"
                            title={
                                csdn ? (
                                    <a href={csdn}>
                                        <Tag className="csdnTag" color="geekblue">
                                            CSDN
                                        </Tag>
                                        <span>{csdn}</span>
                                    </a>
                                ) : (
                                    ""
                                )
                            }
                        />
                    </Card>
                </Col>

                <Col md={12} sm={24} xs={24} className="time-line-wrapper">
                    <Timeline mode="alternate">
                        {recentBlogs.map((blog) => (
                            <Timeline.Item key={blog._id}>
                                <a href={`/content/${blog._id}`}>
                                    {blog.title}
                                </a>
                                <br />
                                {dateFormat(new Date(blog.createDate), 'yyyy-MM-dd hh:mm:ss')}
                            </Timeline.Item>
                        ))}
                    </Timeline>
                </Col>
            </Row>
        </>
    );
}

export default AboutMe;
